<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>巨幕缩略图和警告框组件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<!-- 
	1.巨幕组件(主要是展示网站的关键性区域)
		1)	.jumbotron 						//被container包着的样式：在固定的范围内，有圆角
											//包着container的样式：100%全屏，没有圆角

	2.页头组件
		1)	.page-header 					//多了border-bottom

	3.略所图(栅格系统)
		1)	.thumbnail 						//对img的容器div添加
	
	4.略所图的自定义内容
		1)	.caption 						//与img同级

	5.警告框组件
		1)	.alert
		2) 	.alert-success
			.alert-info
			.alert-warning
			.alert-danger

	6.可以关闭的警告框
		1)	data-dismiss="alert" 			//纯css样式,关闭,对button的父级容器添加

	7.附有超链接的警告框
		1)	.alert-link 					//使超链接文本的样式和警告框相似，更加美观同时字体加粗
-->



	<!-- 固定的范围内，有圆角 -->
	<!-- <div class="container">
		<div class="jumbotron">
			<h3>网站标题</h3>
			<p>网站的详细简介</p>
			<p><a href="#" class="btn btn-default">进入</a></p>
		</div>
	</div> -->
	
	<!-- 100%全屏，没有圆角 -->
	<!-- <div class="jumbotron">
		<div class="container">
			<h3>网站标题</h3>
			<p>网站的详细简介</p>
			<p><a href="#" class="btn btn-default">进入</a></p>
		</div>
	</div> -->

	<!-- 页头组件 -->
	<!-- <div class="page-header">
		<h1>我是大标题 <small>我是小标题</small></h1>
	</div> -->

	<!-- 略所图 + 自定义内容 -->
	<!-- <div class="container">
		<div class="row">
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="thumbnail">
					<img src="img/1.jpg" alt="图片">

					<div class="caption">
						<h3>图片</h3>
						<span>关于这张图片的详情！</span>
						<button class="btn btn-default">快速进入</button>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="thumbnail">
					<img src="img/1.jpg" alt="图片">
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="thumbnail">
					<img src="img/1.jpg" alt="图片">
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="thumbnail">
					<img src="img/1.jpg" alt="图片">
				</div>
			</div>
		</div>
	</div> -->

	<!-- 警告框组件 -->
	<div class="alert alert-danger">
		我是一个危险的警告框!
		<a class="alert-link" href="#">请下载最新版本</a>
		<button class="close" data-dismiss="alert"><span>&times;</span></button>
	</div>

	

	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>